<template>
	<view class="wui-loadMore" @click="$emit('click',loadingStatus)">
		<view class="load-content" v-if="loadingStatus === 'beforeLoading'">{{ loadingtext.beforeLoadingText }}</view>
		<view class="load-loading" v-if="loadingStatus === 'loading'">
			<view class="load-loading-rect1" :style="[loadingColorComputed]"></view>
			<view class="load-loading-rect2" :style="[loadingColorComputed]"></view>
			<view class="load-loading-rect3" :style="[loadingColorComputed]"></view>
			<view class="load-loading-rect4" :style="[loadingColorComputed]"></view>
			<view class="load-loading-rect5" :style="[loadingColorComputed]"></view>
		</view>
		<view class="load-content" v-if="loadingStatus === 'afterLoading'">{{ loadingtext.afterLoadingText }}</view>
	</view>
</template>

<script>
export default {
	name: 'w-loadMore',
	props: {
		loadingColor: {
			type: String,
			default: '#664e32'
		},
		loadingStatus: {
			type: String,
			default: 'beforeLoading'
		},
		loadingtext: {
			type: Object,
			default: () => {
				return {
					beforeLoadingText: '点击加载或者下滑加载',
					afterLoadingText: '我也是有底线的'
				};
			}
		}
	},
	computed: {
		loadingColorComputed() {
			return {
				'--loading-color': this.loadingColor
			};
		}
	}
};
</script>

<style lang="scss" scoped>
@keyframes stretchdelay {
	0%,
	40%,
	100% {
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	}

	20% {
		transform: scaleY(1);
		-webkit-transform: scaleY(1);
	}
}
.wui-loadMore {
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.load-content {
	display: flex;
	justify-content: center;
	align-items: center;
}
.load-content:before,
.load-content:after {
	content: '';
	width: 80rpx;
	height: 2rpx;
	background-color: #969696;
}
.load-content:before {
	margin-right: 30rpx;
}
.load-content:after {
	margin-left: 30rpx;
}

.load-loading {
	height: 60rpx;
	text-align: center;

	& > view {
		height: 100%;
		width: 4px;
		display: inline-block;
		margin: 0 4rpx;
		background-color: var(--loading-color);
		animation: stretchdelay 1.2s infinite ease-in-out;
	}

	.load-loading-rect2 {
		animation-delay: -1.1s;
	}

	.load-loading-rect3 {
		animation-delay: -1s;
	}

	.load-loading-rect4 {
		animation-delay: -0.9s;
	}

	.load-loading-rect5 {
		animation-delay: -0.8s;
	}
}
</style>
